@use 'sass:map';
@use 'sass:color';
@use '@angular/material' as mat;
@import '../@core/variables';

@mixin color($theme) {
  $config: mat.get-color-config($theme);
  $is-dark-theme: map.get($config, is-dark);

  $primary: map.get($config, 'primary');
  $accent: map.get($config, 'accent');
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);
  $fill-background:
    mat.get-color-from-palette($foreground, base, if($is-dark-theme, 0.05, 0.02));
  $fill-disabled-background:
    mat.get-color-from-palette($foreground, base, if($is-dark-theme, 0.05, 0.02));

  .mat-form-field-appearance-fill .mdc-text-field--filled:not(.mdc-text-field--disabled) {
    background-color: $fill-background;
  }

  // a {
  //   color: mat.get-color-from-palette($foreground, text);
  //   &:hover {
  //     color: mat.get-color-from-palette($primary, 500);
  //   }
  // }

  .mat-checkbox.ngm-density__compact {
    font-size: 12px;
    line-height: 12px;
    .mat-checkbox-inner-container {
      height: 12px;
      width: 12px;
      margin-right: 4px;
    }
    .mat-checkbox-ripple {
      left: calc(50% - 15px);
      top: calc(50% - 15px);
      height: 30px;
      width: 30px;
    }
    .mat-ripple-element {
      height: 30px;
      width: 30px;
    }
  }
  .mat-checkbox.ngm-density__cosy {
    font-size: 14px;
    line-height: 14px;
    .mat-checkbox-inner-container {
      height: 14px;
      width: 14px;
      margin-right: 6px;
    }
    .mat-checkbox-ripple {
      left: calc(50% - 15px);
      top: calc(50% - 15px);
      height: 30px;
      width: 30px;
    }
  }

  .mat-mdc-list.ngm-density__compact, .mat-mdc-list.ngm-density__cosy {
    .mat-mdc-list-item.mat-mdc-list-item-with-avatar {
      height: unset;
    }
  }

  // 公共样式, 需要抽取统一
  /* button */
  .mat-button,
  .mat-mdc-icon-button,
  .mat-stroked-button {
    &.mat-success {
      color: mat.get-color-from-palette($success-palette);
    }
  }

  .mat-mdc-icon-button {
    .mat-icon {
      // display: block;
      // margin: auto;
    }
  }

  .mat-stepper-horizontal {
    .mat-step-icon {
      width: 40px;
      height: 40px;
      border: 2px solid mat.get-color-from-palette($primary);
      background-color: unset;
      color: mat.get-color-from-palette($foreground, text);
      &.mat-step-icon-selected {
        background-color: mat.get-color-from-palette($primary);
        color: white;
      }
    }
  }

  .mat-datepicker-content {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 15px;
  }

  pac-features {
    .ant-page-header-footer {
      margin-top: 0;
    }
  }

  .mat-mdc-menu-panel {
    .selected.mat-menu-item {
      font-weight: 600;
    }

    &.mat-color-accent {
      .selected.mat-menu-item {
        color: mat.get-color-from-palette($accent);
      }
    }
  }

  ngm-component-settings {
    .metad-formly-array {
      .metad-formly__array-row {
        border: unset;
      }
    }

    .formly-field,
    .mat-form-field {
      font-size: 12px;
    }
  }

  .mat-mdc-list-base.ngm-density__compact .mat-mdc-list-item {
    height: 30px;
    line-height: 30px;
    font-size: 12px;

    .mat-mdc-list-item-content {
      padding: 0 6px;
    }
  }

  .mat-mdc-list-base.ngm-density__compact .mat-mdc-list-item .mat-mdc-list-item-content > .mat-icon {
    font-size: 16px;
    line-height: 18px;
    width: 18px;
    height: 18px;
  }

  .mat-toolbar.ngm-density__compact {
    &.mat-toolbar-row, &.mat-toolbar-single-row {
      height: 33px;
      padding: 0 6px;
      font-size: 1rem;
    }

    .mat-toolbar-row {
      padding: 0 6px;
    }
  }

  // .mat-mdc-icon-button.mat-mdc-button-base {
  //   &:hover:not(.mat-button-disabled):not(.cdk-menu-item) {
  //     @apply bg-gray-400/20;
  //   }
  // }

  .mat-accordion.ngm-density__compact {
    .mat-expansion-panel-header:not(.mat-expanded) {
      height: 38px;
    }
    .mat-expansion-panel-header {
      padding: 0 14px;
    }
  }

  .pac-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 2rem;
    align-items: center;
    .bug {
      font-size: 2em;
      line-height: 1.5;
    }
    .description {
      max-width: 100%;
      overflow: auto;
      font-size: 1em;
      line-height: 1.5;
    }
  }

  .metad-formly-accordion {
    .mat-expansion-panel-header-description {
      margin-right: 0;
    }
  }

  .metad-formly-expansion {
    .mat-expansion-panel-header > .mat-content {
      overflow: visible;
    }
  }

  .pac-user-chips {
    position: relative;
    display: block;
  }

  .mat-radio-group.ngm-density__compact {
    --radio-size: 15px;
    .mat-radio-container, .mat-radio-outer-circle, .mat-radio-inner-circle {
      width: var(--radio-size);
      height: var(--radio-size);
    }
  }

  .ngm-tree-table .mat-cell, .ngm-tree-table .mat-header-cell {
    white-space: nowrap;
    padding: 0 10px;
  }

  .ngm-entity-property {
    --icon-size: 16px;
    .mat-icon.mat-icon-no-color {
      opacity: .5;
      font-size: var(--icon-size);
      width: var(--icon-size);
      height: var(--icon-size);
      line-height: var(--icon-size);
    }
  }

  .ngxp__container > .ngxp__arrow::before {
    background-color: mat.get-color-from-palette($background, card);
  }

  .ngm-selection-list {
    .mat-mdc-list-option {
      @apply rounded-md;
    }
  }

  .ngm-rounded-full.mat-mdc-button-base {
    @apply rounded-full;
  }

  .emoji-loader {
    position: relative;
    &::before {
      position: absolute;
      width: 1em;
      height: 1em;
      left: 50%;
      top: 50%;
      font-size: 2rem;
      text-align: center;
      transform: translate(-50%, -50%);
      content: "" "🕛";
      animation: emoji-loader 1.2s steps(12) infinite forwards 0s;
    }
  }

  @keyframes emoji-loader {
    0% {
      content: "🕐";
    }
    8.3% {
      content: "🕑";
    }
    16.6% {
      content: "🕒";
    }
    24.9% {
      content: "🕓";
    }
    33.2% {
      content: "🕔";
    }
    41.5% {
      content: "🕕";
    }
    49.8% {
      content: "🕖";
    }
    58.1% {
      content: "🕗";
    }
    66.4% {
      content: "🕘";
    }
    74.7% {
      content: "🕙";
    }
    83.0% {
      content: "🕚";
    }
    92.3% {
      content: "🕛";
    }
    100% {
      content: "🕐";
    }
  }

  .pac-copilot-chat {
    p {
      margin: 0
    }

    markdown {
      pre {
        @apply text-xs;
      }
  
      table {
        border-collapse: collapse;
        width: 100%;
      }
      
      th, td {
        @apply border border-gray-300 text-left;
        padding: 4px 8px;
      }
    }
  }

  .active.mat-menu-item {
    color: mat.get-color-from-palette($accent);
    font-weight: 600;
  }

  .cdk-menu {
    .cdk-menu-item {
      &.ngm-appearance-danger:hover {
        @apply bg-red-400 text-white;
      }
    }
  }

  .mat-mdc-menu-panel {
    .mat-mdc-menu-item {
      &.ngm-appearance-danger:hover {
        @apply bg-red-400 text-white;
        .mat-icon-no-color {
          @apply text-white;
        }
      }

      .mat-checkbox-layout {
        width: 100%;
        .mat-checkbox-label {
          flex: 1
        }
      }
    }
  }

  // Status bar
  .pac-status-bar__local-agent .mat-mdc-tab-body-wrapper {
    @apply flex-1;

    .mat-mdc-tab-body-content {
      @apply p-4 flex flex-col;
    }
  }
}

@mixin density($theme) {
  .ngm-stepper.mat-stepper-vertical {
    .mat-step-icon {
      @apply w-10 h-10 -left-2;
    }
  }
}

@mixin typography($theme) {
}

@mixin theme($theme) {
  $color: mat.get-color-config($theme);
  $density: mat.get-density-config($theme);
  $typography: mat.get-typography-config($theme);

  @if $color != null {
    @include color($color);
  }
  @if $density != null {
    @include density($density);
  }
  @if $typography != null {
    @include typography($typography);
  }
}
